.pure-notice-bar {
    line-height: var(--pure-notice-bar-line-height, 1);
    background: var(--pure-notice-bar-background, var(--pure-background-element));
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    height: 0;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    transform-origin: top center;
    overflow: hidden;
}

.pure-notice-bar-uninit {
    height: 0;
    opacity: 0;
}

.pure-notice-bar-show {
    height: var(--pure-notice-bar-height, auto);
    opacity: 1;
}

.pure-notice-bar-wrapper {
    /* 加上 transform 可以让内容同步上移 */
    /* transform: translateY(-100%); */
    display: var(--pure-notice-bar-display, flex);
    flex-direction: var(--pure-notice-bar-flex-direction, row);
    align-items: var(--pure-notice-bar-align-items, center);
    justify-content: var(--pure-notice-bar-justify-content, space-between);
    box-sizing: border-box;
    transition: all 0.3s ease-in-out;
    transform-origin: top center;
    padding: var(--pure-notice-bar-padding, 0.5em 1em);
}

.pure-notice-bar-show .pure-notice-bar-wrapper {
    /* 加上 transform 可以让内容同步上移 */
    /* transform: translateY(0); */
}

.pure-notice-bar-left {
    flex-shrink: 0;
}

.pure-notice-bar-content {
    flex: 1;
    overflow: hidden;
    margin: var(--pure-notice-bar-content-margin, 0 5px);
    line-height: var(--pure-notice-bar-content-line-height, 1.5);
    position: relative;
    height: var(--pure-notice-bar-content-height, calc(var(--pure-notice-bar-content-line-height, 1.5) * 1em * var(--pure-notice-bar-line-clamp, 1)));
    box-sizing: border-box;
    width: 100%;
}

.pure-notice-bar-items {
    position: relative;
    width: 100%;
    height: 100%;
}

.pure-notice-bar-item {
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-duration: var(--pure-notice-bar-item-slide-duration, 20s);
}

/* 默认 */
.pure-notice-bar-item-moving {
    animation-name: pure-notice-bar-item-slide;
}

/* Dock 一阶段 */
.pure-notice-bar-item-moving-first {
    animation-name: pure-notice-bar-item-slide-moving-first;
}

/* Dock 二阶段 */
.pure-notice-bar-item-moving-second {
    animation-name: pure-notice-bar-item-slide-moving-second;
}

.pure-notice-bar-item-text {
    overflow: var(--pure-notice-bar-item-overflow);
    white-space: var(--pure-notice-bar-item-white-space, nowrap);
    text-overflow: var(--pure-notice-bar-item-text-overflow);
    display: var(--pure-notice-bar-item-display);
    word-break: var(--pure-notice-bar-item-word-break);
    line-clamp: var(--pure-notice-bar-line-clamp);
    -webkit-line-clamp: var(--pure-notice-bar-line-clamp);
    -webkit-box-orient: var(--pure-notice-bar-item-box-orient);
}

.pure-notice-bar-x .pure-notice-bar-item {
    position: absolute;
    z-index: 8;
    left: 100%;
    top: var(--pure-notice-bar-item-top, 50%);
    transform: var(--pure-notice-bar-item-transform, translateY(-50%));
    width: var(--pure-notice-bar-item-width, 100%);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.pure-notice-bar-right {
    flex-shrink: 0;
}

.pure-notice-bar-icon {
    font-size: var(--pure-notice-bar-icon-font-size, var(--pure-font-size-larger));
    color: var(--pure-notice-bar-icon-color);
    margin: var(--pure-notice-bar-icon-margin);
    box-sizing: border-box;
    padding: var(--pure-notice-bar-icon-padding);
}

.pure-notice-bar-icon-left {
    --pure-notice-bar-icon-font-size: var(--pure-notice-bar-icon-left-font-size);
    --pure-notice-bar-icon-color: var(--pure-notice-bar-icon-left-color);
}

.pure-notice-bar-icon-right {
    --pure-notice-bar-icon-font-size: var(--pure-notice-bar-icon-right-font-size);
    --pure-notice-bar-icon-color: var(--pure-notice-bar-icon-right-color);
}

/* 默认 */
@keyframes pure-notice-bar-item-slide {
    0% {
        left: 100%;
    }

    100% {
        left: calc(-1 * var(--pure-notice-bar-item-moving-width));
    }
}

/* Dock 一阶段 */
@keyframes pure-notice-bar-item-slide-moving-first {
    0% {
        left: 100%;
    }

    100% {
        left: 0;
    }
}

/* Dock 二阶段 */
@keyframes pure-notice-bar-item-slide-moving-second {
    0% {
        left: 0;
    }

    100% {
        left: calc(-1 * var(--pure-notice-bar-item-moving-width));
    }
}
